<template>
  <div class="res-card">
    <div class="image">
      <slot
        name="image"
      >
        <img
          :src="fullUrl(img)"
          :alt="title"
          onerror="this.src='/static/placeholder.png';this.οnerrοr=null"
        >
      </slot>
    </div>
    <div class="content">
      <slot
        name="tag"
      >
        <span
          v-if="tag"
          class="tag"
        >{{ tag }}</span>
        <span
          v-else
          class="tag"
          :class="type"
        >{{ getTag(type) }}</span>
      </slot>
      <slot
        name="title"
      >
        <span class="title">{{ title }}</span>
      </slot>
      <slot
        name="sub-title"
      >
        <span
          v-if="subTitle"
          class="sub-title"
        >{{ subTitle }}</span>
      </slot>
    </div>
    <div class="bottom">
      <slot name="bottom" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { cdn } from '@/utils'

@Component({
  name: 'ResCard'
})
export default class extends Vue {
  @Prop() type!: string;
  @Prop({ default: '/static/placeholder.png' }) img!: string;
  @Prop({ required: true }) title!: string;
  @Prop() subTitle!: string;
  @Prop() tag!: string;

  private fullUrl = cdn

  private getTag (tag: string) {
    switch (tag) {
      case 'artist':
        return '歌手'
      case 'album':
        return '专辑'
      case 'song':
        return '歌曲'
      default:
        return tag
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.res-card {
  min-width: 180px;
  .image {
    line-height: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    color: black;
    background-color: white;
    padding: 8px;
    .tag {
      float: right;
    }
    .title {
      font-weight: 700;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      max-height: 3em;
    }
    .sub-title {
      a {
        color: black;
        font-size: 0.9em;
      }
    }
  }
  .bottom {
    color: white;
    background-color: #ea6667;
  }
}

span.tag {
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: @red;
  border-radius: 6px;
  padding: 1px 4px;
  color: @red;
  font-size: 12px;
  font-weight: 700;
  &.artist {
    border-color: @blue-light;
    color: @blue-light;
  }
  &.album {
    border-color: @red;
    color: @red;
  }
  &.song {
    border-color: @green;
    color: @green;
  }
}
</style>
